<template>
  <div ref="pageView" class="page-view">
    <!-- 手机预览模块 -->
    <div class="preview">
      <div class="preview-head">
        <div class="preview-head-title">
          {{ pageData.name || '微页面标题' }}
        </div>
      </div>
      <div class="preview-wrap">
        <iframe
          id="previewIframe"
          :src="previewSrc"
          class="preview-iframe"
          title="频道名称"
          width="100%"
          :height="previewHeight"
          @load="onLoadH5"
        />
      </div>
      <div v-if="dragActive" class="preview-drag-mask" @dragover="onDragover" />
      <div v-if="dragActive" class="preview-drag-out" @dragover="onDragout" />
    </div>
  </div>
</template>

<script>
import { mapState, mapActions, mapMutations } from 'vuex'
import settings from '@/config'

export default {
  name: 'PageView',
  computed: {
    ...mapState(['pageData', 'previewHeight', 'dragActive', 'componentsTopList', 'addComponentIndex']),
    previewSrc() {
      return settings.decorateViewSrc + `?pageId=${this.$route.query.id || ''}&noLogin=true`
    }
  },
  mounted() {
    // 完成跨源通信实例的监听
    this.initMessage()
    console.log('数据', this.pageData, this.previewSrc)
  },
  methods: {
    ...mapActions(['initMessage', 'pageChange']),
    ...mapMutations(['SET_DRAG_INDEX', 'VIEW_ADD_PREVIEW', 'DELETE_COMPONENT']),
    onDragover(event) {
      event.preventDefault()
      // 鼠标距离浏览器窗口的高度
      const dropTop = event.pageY - this.$refs.pageView.scrollTop - 191
      // 获取当前拖动组件要添加位置的索引
      let addIndex = 0
      for (let i = this.componentsTopList.length - 1; i >= 0; i--) {
        const value = this.componentsTopList[i]
        const prev = this.componentsTopList[i - 1] || 0
        const _harf = (value - prev) / 2
        if (i === 0 && dropTop <= _harf) break
        if (dropTop > prev - _harf) {
          addIndex = i + 1
          break
        }
      }
      // 判断是否需要跨源通信
      if (addIndex === this.addComponentIndex) return
      this.SET_DRAG_INDEX(addIndex)
      this.VIEW_ADD_PREVIEW(addIndex)
    },
    onDragout() {
      if (this.addComponentIndex !== null) {
        this.pageChange({
          type: 'delete'
        })
      }
    },
    // iframe加载完成后的操作
    onLoadH5() {
      this.$store.commit('VIEW_UPDATE')
    }
  }
}
</script>

<style lang="less" scoped>
.page-view {
  position: absolute;
  top: 56px;
  left: 186px;
  right: 376px;
  bottom: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background-color: #f7f8fa;
  display: flex;
  justify-content: center;
  user-select: none;
}
.cache-box {
  position: absolute;
  left: 20px;
  right: 20px;
  top: 20px;
  height: 30px;
  line-height: 30px;
  overflow: hidden;
  background: @color-1-bg;
  border: 1px solid @color-1;
  padding: 0 10px;
  z-index: 2;
  .color-1 {
    cursor: pointer;
  }
  .cache-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    text-align: center;
    cursor: pointer;
    color: #aaa;
  }
}
.preview {
  position: absolute;
  width: 100%;
  .preview-head {
    height: @content-header-height;
    width: 375px;
    margin: 70px 0px 0px 28%;
    background: url("~@/assets/img/layout/header_bg.png") left top no-repeat;
    background-size: cover;
    position: relative;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
    .preview-head-title {
      width: 180px;
      margin: 0 auto;
      height: 64px;
      font-size: 14px;
      text-align: center;
      padding-top: 30px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .preview-iframe {
    min-height: 600px;
  }
  .preview-drag-mask {
    position: absolute;
    left: 50%;
    top: 60px;
    bottom: 20px;
    width: 520px;
    margin-left: -260px;
    z-index: 10;
  }
  .preview-drag-out {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 9;
  }
}
</style>
